<div id="page-btns" class="page page-current">
    <header class="bar bar-nav">
        <a class="button button-link button-nav pull-left back">
            <span class="icon icon-left"></span>
            返回
        </a>
        <h1 class="title">按钮</h1>
    </header>
    <div class="content native-scroll">
        <div class="content-block-title">默认按钮</div>
        <div class="content-block">
            <p><a class="button">Usual Button 1</a></p>
            <p><a class="button button-success">success button</a></p>
            <p><a class="button button-danger">danger button</a></p>
            <p><a class="button button-warning">warning button</a></p>
        </div>
        <div class="content-block">
            <p><a class="button button-round">Round Button 1</a></p>
        </div>
        <div class="content-block">
            <p><a class="button button-big">Big Button </a></p>
            <p><a class="button button-big button-round">Big Round Button </a></p>
        </div>
        <div class="content-block-title">按钮组</div>
        <div class="content-block">
            <p class="buttons-row"><a class="button">Button 1</a><a class="button">Button 2</a><a class="button">Button 3</a></p>
            <p class="buttons-row"><a class="button active">Button 1</a><a class="button">Button 2</a><a class="button">Button 3</a></p>
            <p class="buttons-row"><a class="button button-round">Button 1</a><a class="button button-round">Button 2</a></p>
            <p class="buttons-row"><a class="button button-round">Button 1</a><a class="button button-round active">Button 2</a></p>
        </div>
        <div class="content-block-title">填充按钮</div>
        <div class="content-block">
            <p><a class="button button-fill">Fill Button </a></p>
            <p><a class="button button-fill button-success">Fill Button </a></p>
            <p><a class="button button-fill button-danger">Fill Button </a></p>
            <p><a class="button button-fill button-warning">Fill Button </a></p>
        </div>
        <div class="content-block-title">列表按钮</div>
        <div class="list-block">
            <ul>
                <li><a class="item-link list-button">List Button 1</a></li>
                <li><a class="item-link list-button">List Button 2</a></li>
                <li><a class="item-link list-button">List Button 3</a></li>
            </ul>
        </div>
        <div class="content-block-title">内联列表按钮</div>
        <div class="list-block inset">
            <ul>
                <li><a class="item-link list-button">List Button 1</a></li>
                <li><a class="item-link list-button">List Button 2</a></li>
                <li><a class="item-link list-button">List Button 3</a></li>
            </ul>
        </div>
        <div class="content-block-title">使用栅格来布局按钮</div>
        <div class="content-block">
            <div class="row">
                <div class="col-50"><a class="button button-big button-fill button-danger">Cancel</a></div>
                <div class="col-50"><a class="button button-big button-fill button-success">Submit</a></div>
            </div>
        </div>
    </div>
</div>
